<template>
  <div class="container home">
    <div class="top">
      <div class="school" @click="changeSchool">
        <i class="icon_select"></i>
        <span>{{schoolName || '校区选择'}}</span>
      </div>
      <div class="search">
        <input type="text" v-model="searchValues">
        <i class="icon_search" @click="search"></i>
      </div>
    </div>

    <div class="body">
      <ul class="class_list">
        <li class="class_item" v-for="(item, index) in classList" :key='index' @click="toDetail($event, item)">
          <div class="title_box">
            <div>
              <i class="icon_classTitle"></i>
              <h4>{{item.productName}}</h4>
            </div>
            <i class="icon_more" @click="toDetail($event, item)"></i>
          </div>
          <div class="class_info_box">
            <div class="class_img">
              <img src="../assets/img/class_img.png" alt="">
            </div>
            <div class="class_info">
              <div class="class_hour">{{item.totalHour}}课时/{{item.weekMun}}周</div>
              <p class="desc">{{item.productIntroductions}}</p>
              <div class="price">
                <span class="original_price">￥{{item.productPrice}}</span>
                <span class="discount_price">折后价￥{{item.discountPrice}}</span>
              </div>

              <div class="buy_box">
                <span>{{item.numberOfEnrolment}}人已报名</span>
                <div class="btn btn_buy" @click="buyClass(item)">购买</div>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <div class="no_more">
        <i class="icon_nomore"></i>
        <span>没有更多了</span>
      </div>
    </div>

    <div class="popup">
      <van-popup v-model="showBottomArea" round position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          title="校区选择"
          value-key="schoolName"
          :columns="schoolList"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
  </div>
</template>


<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adminBasic");
export default {
  data() {
    return {
      showBottomArea: false,
      schoolName: '',
      schoolId: '7323e01b35e84ccfbd7f98979f5cf0c0',   // 默认显示斑马在线校区
      searchValues: '',
      schoolList: [],
      classList: [],
    }
  },
  created() {
    this.queryAllSchool();
    this.insertPvUv();

    let createByObj = {
      createBy: this.$route.query.createBy,
      createByName: this.$route.query.createByName,
    }
    if(createByObj) {
      createByObj = JSON.stringify(createByObj);
      localStorage.setItem('createByObj', createByObj);
    }else{
      localStorage.setItem('createByObj', '');
    }
  },
  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    insertPvUv() {
      this.post({
        API: 'insertPvUv',
        data: {
          openId: localStorage.getItem('openId'),
          pageName: '商城首页列表',
          pageType: 'home'
        }
      }).then(res => {

      })
    },
    
    initData() {
      let data = {
        schoolId: this.schoolId,
        searchValues: this.searchValues,
      }

      this.post({
        API: 'queryOnlineProductList',
        data: data
      }).then(res => {
        // res = res.filter(item => {
        //   return item.schoolId == '7323e01b35e84ccfbd7f98979f5cf0c0'    // 暂时只显示斑马在线 课程
        // })
        this.classList = res;
      })
    },

    search() {
      this.initData();
    },
    toDetail(e, item) {
      if(e.target.className == 'btn btn_buy') {
        return false;
      }
      this.$router.push({
        name: 'courseDetail',
        query: {
          id: item.productId,
          schoolId: item.schoolId,
        }
      })
    },
    changeSchool() {
      this.showBottomArea = true;
    },
    buyClass(item) {
      this.$router.push({
        name: 'order',
        query: {
          productId: item.productId,
          schoolId: item.schoolId
        }
        // params: {
        //   productId: item.productId
        // }
      })
    },
    onConfirm(value, index) {
      console.log(`当前值：${value.id || value}, 当前索引：${index}`)
      this.schoolName = this.schoolList[index].schoolName;
      this.schoolId = value.schoolId;
      this.initData();
      this.showBottomArea = false;
    },
    onCancel() {
      this.showBottomArea = false;
    },

    queryAllSchool() {
      this.post({
        API: 'queryAllSchool',
        data: {}
      }).then(res => {
        res = res.filter(item => {
          return item.schoolId !== '';
        })

        res.forEach(item => {
          if(item.schoolId == '7323e01b35e84ccfbd7f98979f5cf0c0') {
            this.schoolName = item.schoolName;
          }
        })



        this.schoolList = res;
        // this.schoolId = res[0].schoolId;
        // this.schoolName = res[0].schoolName;
        this.initData();
      })
    },
  },

}
</script>

<style scoped>
.home .top {
  height: 1.173333rem;
  background: #FFD33D;
  padding: 0 .266667rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home .school {
  display: flex;
  align-items: center;
}
.home .top span {
  color: #fff;
  font-size: .446667rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: 4.266667rem;
}
.home .icon_select {
  display: inline-block;
  width: .666667rem;
  height: .453333rem;
  background: url('../assets/img/icon_select.png') 0 0 no-repeat;
  background-size: contain;
  margin-right: .133333rem;
}
.home .top .search {
  position: relative;
  height: .8rem;
  font-size: 0;
}
.home .top .search input{
  width: 4.533333rem;
  box-sizing: border-box;
  text-align: center;
  font-size: .373333rem;
  height: .8rem;
}
.home .icon_search {
  display: inline-block;
  position: absolute;
  right: .386667rem;
  top: 50%;
  transform: translateY(-50%);
  width: .493333rem;
  height: .52rem;
  background: url('../assets/img/icon_search.png') 0 0 no-repeat;
  background-size: contain;
}

.home .class_item {
  margin-top: .266667rem;
  padding: .266667rem .333333rem;
  box-sizing: border-box;
  background: #fff;
}
.home .title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home .title_box>div {
  display: flex;
  align-items: center;
}
.home .icon_more {
  width: .76rem;
  height: .213333rem;
  display: inline-block;
  background: url('../assets/img/icon_more.png') 0 0 no-repeat;
  background-size: contain;
}



.home .buy_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: .206667rem;
}
.home .buy_box span {
  color: #C0C4CC;
  font-size: .32rem;
  margin-right: .213333rem;
}
.home .btn_buy {
  width: 1.733333rem;
  height: .8rem;
}
.home .no_more:before{
  margin-right: .293333rem;
}
.home .no_more:after{
  margin-left: .293333rem;
}
.home .no_more:before,.home .no_more:after {
  content: '';
  width: 2.666667rem;
  height: .013333rem;
  background: #D9D8D8;
}
.home .no_more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.04rem;
}

.home .no_more span {
  color: #B9B9B9;
  font-size: .32rem
}
.home .no_more .icon_nomore {
  width: .546667rem;
  height: .546667rem;
  display: inline-block;
  background: url('../assets/img/icon_nomore.png') 0 0 no-repeat;
  background-size: contain;
  margin-right: .186667rem;
}

.home .btn:active {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

</style>
